<template>
 <v-layout align-center justify-center column fill-height :style="{height:'80vh',backgroundColor:'#fafafa'}">
    <v-card :width="350">
      <v-container fluid grid-list-lg>
        <v-layout row wrap>
          <v-flex xs12>
            <v-layout align-center justify-space-around wrap>
              <v-avatar color="rgb(222, 4, 81)">
                <v-icon color="#fafafa">camera</v-icon>
              </v-avatar>
            </v-layout>
            <v-flex class="text-xs-center">
              <h2>
                扫码登陆
              </h2>
            </v-flex>
          </v-flex>
          <v-divider class="divider"></v-divider>
          <v-flex xs12  text-xs-center>
              <v-img style="height:180px;width:180px;margin:auto" src="./static/image/weixin.png"></v-img>
          </v-flex>
          <v-flex xs12 text-xs-center class="subheading">
              请使用&nbsp;<span class="winxinfontcolor">微信</span>&nbsp;扫码登陆
          </v-flex>
          <v-flex xs12 class="caption fontcolor" >
              <v-layout row wrap  xs12 >
                <v-flex xs4 text-xs-right>
                    <v-icon class="fontcolor" small>verified_user</v-icon>&nbsp;安全
                </v-flex>
                <v-flex xs4 text-xs-center>
                    <v-icon class="fontcolor" small>flash_on</v-icon>&nbsp;高效
                </v-flex>
                <v-flex xs4  text-xs-left>
                    <v-icon class="fontcolor" small>aspect_ratio</v-icon>&nbsp;便捷
                </v-flex> 
              </v-layout>
          </v-flex>
          <v-divider class="divider"></v-divider>
          <v-flex xs12 text-xs-right>
            <v-btn flat  color="primary" :to="{path:'/login'}">账户登陆 <v-icon>navigate_next</v-icon></v-btn>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
    <p class="commpany-info">2018&copy;北京开心贝科技有限公司</p>
  </v-layout>
</template>

<script>
 export default {
   data () {
     return {

     }
   },
   components: {

   }
 }
</script>

<style scoped>
.commpany-info {
  margin-top: 48px;
  margin-bottom: 32px;
  color: rgba(0, 0, 0, 0.54);
  text-align: center;
}
.fontcolor{
    color: #999
}
.divider {
  margin:10px 2px;
}
.winxinfontcolor{
  color: deepskyblue
}
</style>
